<template>
  <div id="upload-box">
    <div class="custom-upload-btn" @click="$refs.file.click()">
      <span v-if="!imageUrl && !localImageUrl">+</span>
      <div class="custom-upload-btn" v-else>
      <img :src="localImageUrl ? localImageUrl : imageUrl" alt="">
        <i class="deleted el-icon-delete" @click.stop="cleanup"/>
      </div>
    </div>
    <input style="opacity: 0; width: 0; height: 0;" type="file" ref="file" @change="onFileChange"/>
  </div>
</template>

<script>
export default {
  name: 'singleUpload',
  props: ['imageUrl'],
  data() {
    return {
      file: null,
      localImageUrl: ''
    };
  },
  methods: {
    onFileChange(event) {
      let files = event.target.files || event.dataTransfer.files;
      if (files.length > 0) {
        // 验证文件
        if (!this.checkCoverLegal(files[0])) return;

        this.file = files[0];
        this.localImageUrl = URL.createObjectURL(this.file);
        this.$emit('getFile', this.file);
        // 清空file，防止第二次选择相同文件时，不会触发change事件
        this.$refs.file.value = null;
      } else {
        this.localImageUrl = '';
      }
    },
    /**
     * 验证上传的图片
     * @param file 文件
     * @returns {boolean} 是否通过校验
     */
    checkCoverLegal(file) {
      // 判断文件类型是否为png或jpg
      const isPngOrJPG = file.type === 'image/png' || file.type === 'image/png' || file.type === 'image/jpeg';
      // 判断文件大小是否小于2M
      const isLt2M = file.size / 1024 / 1024 < 10;

      if (!isPngOrJPG) {
        this.$message.error('上传封面图片只能是 JPG/PNG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传封面图片大小不能超过 10MB!');
      }
      return isPngOrJPG && isLt2M;
    },
    cleanup() {
      this.localImageUrl = '';
      // 清空file，防止第二次选择相同文件时，不会触发change事件
      this.$refs.file.value = null;
      // 清理URL对象，防止内存泄漏
      if (this.file) {
        URL.revokeObjectURL(this.file);
      }
      this.$emit('cleanup');
    }
  },
  beforeDestroy() {
    this.cleanup()
  }
};
</script>


<style scoped>
#upload-box {
  display: flex;
  min-width: 100px;
  min-height: 100px;
  max-width: 150px;
  max-height: 240px;

  .custom-upload-btn {
    width: 100px; /* 设置宽度 */
    height: 100px; /* 设置高度，保持正方形 */
    border: 2px dashed #ccc; /* 虚线边框 */
    display: flex;
    justify-content: center; /* 水平居中内容 */
    align-items: center; /* 垂直居中内容 */
    outline: none; /* 移除点击时的轮廓 */
    transition: border-color 0.6s ease; /* 边框颜色过渡效果 */
    position: relative;
  }

  .custom-upload-btn:hover {
    border-color: #666; /* 鼠标悬停时边框颜色变化 */
  }

  .custom-upload-btn span {
    font-size: 3em; /* 设置+号的大小 */
    color: #666; /* +号的颜色 */
  }

  .custom-upload-btn .deleted {
    position: absolute;
    top: 45%;
    right: 43%;
    color: white;
    background-color: rgba(255, 0, 0, 0.5);
    opacity: 0;
    cursor: pointer;
  }

  .custom-upload-btn:hover .deleted {
    opacity: 100;
  }

  .custom-upload-btn img {
    width: 100%;
    height: 100%;
    object-fit: fill;
  }
}

</style>